<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">{{$t('目录.仪表盘')}}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/panel/rank' }">{{$t('目录.市场洞察')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 筛选 -->
    <div class="filter-card">
      <div class="filter-card-title">{{$t('目录.市场洞察')}}</div>
      <el-divider></el-divider>
      <div class="sub-title" style="width: 53.75rem;">{{ $t('国家') }}</div>
      <div style="display: flex; margin-top: 1rem;">
        <el-button :class="index==filterAll.country_index?'country-btn-click':'country-btn'" @click="selectCountry(index)" v-for="(item,index) in countriesList" :key="index">{{ item.name }}</el-button>
      </div>
      <div class="sub-title" style="width: 53.75rem;margin: 1rem 0;">{{ $t('分类') }}</div>
      <div style="display: flex;">
        <div class="selecter-label">{{ $t('分类英文') }}</div>
        <!-- 下拉框 -->
        <el-select v-model="filterAll.first_cate_id" placeholder="Select" size="large" style="width: 9.38rem" @change="selectCate1()">
          <el-option v-for="item in cateList" :key="item.id" :label="item.val" :value="item.id"></el-option>
        </el-select>
        <div class="selecter-label">{{ $t('更多') }}</div>
        <!-- 下拉框 -->
        <el-select v-model="filterAll.second_cate_id" placeholder="Select" size="large" style="width: 9.38rem">
          <el-option v-for="item in moreList" :key="item.id" :label="item.val" :value="item.id" @change="selectCate2()"></el-option>
        </el-select>
      </div>
      <!-- 日期选择 -->
      <div class="sub-title" style="width: 53.75rem;margin: 1rem 0;">{{ $t('时间') }}</div>
      <div style="display: flex;">
        <el-date-picker v-model="filterAll.log_date" type="date" placeholder="Pick a day" size="large" :disabled-date="disabledDate" value-format="YYYY-MM-DD" @focus="handleFocus" @visible-change="handleVisibleChange"></el-date-picker>
        <div v-if="isVip">
          <el-button type="primary" style="margin:0rem 0 0 1rem;width: 5.63rem;height: 2.5rem;background-color: rgba(22, 93, 255, 1);" @click="searchProduct()">{{ $t('搜索') }}</el-button>
        </div>
        <div v-else>
          <el-button type="primary" style="margin:0rem 0 0 1rem;width: 5.63rem;height: 2.5rem;background-color: rgba(22, 93, 255, 1);" disabled>{{ $t('搜索') }}</el-button>
        </div>
      </div>
    </div>
    <!-- 排行展示 -->
    <div class="show-card" style="position:relative">
      <!-- 一行 -->
      <div style="display: flex;">
        <div style="width: 85rem;display:flex">
          <div class="sub-title" style="white-space: nowrap;">{{ $t('热销商品') }}</div>
          <div style="font-size: 0.7rem;color: #717a87; margin: 0.5rem 0 0 0.5rem;">{{ $t('前一百') }}</div>
        </div>
        <!-- 新增分段器 -->
        <!-- <div>
          <div class="custom-style" style="width: 24.5rem;">
            <el-segmented v-model="value" :options="options" block style="background-color: #fff;height: 2.5rem" @change="segmentChange"></el-segmented>
          </div>
        </div> -->
        <!-- 切换按钮  -->
        <div v-if="!isList" style="display: flex;position: absolute;right: 1rem;">
            <div style="cursor: pointer;">
              <img style="width: 1.88rem;height: 1.88rem;" @click="changeType(1)" src="../assets/img/icon/girdicon.svg" />
            </div>
            <div style="cursor: pointer;">
              <img style="width: 1.88rem;height: 1.88rem;margin-left: 1rem;" @click="changeType(2)" src="../assets/img/icon/listicon-act.svg" />
            </div>
        </div>
        <div v-else style="display: flex;position: absolute;right: 1rem;">
            <div style="cursor: pointer;">
              <img style="width: 1.88rem;height: 1.88rem;" @click="changeType(3)" src="../assets/img/icon/girdicon-act.svg" />
            </div>
            <div style="cursor: pointer;">
              <img style="width: 1.88rem;height: 1.88rem;margin-left: 1rem;" @click="changeType(4)" src="../assets/img/icon/listicon.svg" />
            </div>
        </div>
      </div>
        <!-- 新增 增速排行 -->
        <!-- <div v-if="isHotSellingRank">
          <div v-if="!isListData2" v-loading="loading" element-loading-text="Loading..." style="margin: 6rem 0;"></div>
          <div v-else>
            <div v-if="isList" v-show="isVip" style="margin-top: 1rem;">
              <el-table :data="productList2" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px'}" :row-style="{height:'70px'}">
                <el-table-column type="index" width="50" label="Rank"/>
                <el-table-column prop="img" label="Product" width="80">
                  <template #default="scope">
                    <div style="cursor: pointer;">
                      <img :src="scope.row.goods_img" style="width: 2.38rem;height: 3.13rem;" @click="showDetail(scope.row.goods_id)"/>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="title" label="Title" width="220">
                  <template #default="scope">
                    <div @click="showDetail(scope.row.goods_id)" style="cursor: pointer;">
                      <p class="showOverTooltip">{{ scope.row.goods_name }}</p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="sale_price_symbol" :label="labelList[0]" width="110"/>
                <el-table-column prop="shipping_fee" :label="labelList[1]" width="80"/>
                <el-table-column prop="retail_price_symbol" :label="labelList[2]" />
                <el-table-column prop="profit" :label="labelList[3]" width="70"/>
                <el-table-column prop="today_sale_count" :label="labelList[7]" width="100"/>
                <el-table-column prop="last_sale_count" :label="labelList[4]" width="120"/>
                <el-table-column prop="sale_count_diff" :label="labelList[8]" width="120"></el-table-column>
                <el-table-column prop="growth_rate" :label="labelList[9]" >
                  <template #default="scope">
                    <div style="display: flex; align-items: center">
                     
                      <div v-if="scope.row.growth_rate[0] !=='-'&& scope.row.growth_rate !=='/'">
                        <span>{{ scope.row.growth_rate }}</span>
                        <img style="margin:0.4rem 0 0 0.3rem" src="../assets/img/icon/arrowup1.svg"/>
                      </div>
                      <div v-else-if="scope.row.growth_rate[0] =='-'">
                        <span>{{ scope.row.growth_rate }}</span>
                        <img style="margin: 0.4rem 0 0 0.3rem;transform:rotate(180deg);width: 0.94rem;height: 0.94rem;" src="../assets/img/icon/arrowdown.svg"/>
                      </div>
                      <div v-else><span>{{ scope.row.growth_rate }}</span></div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-else v-show="isVip">
                  <div style="display: flex;flex-wrap: wrap; justify-content: flex-start;">
                    <div v-if="productList2.length == 0" class="card-noData">
                      {{ $t('卡片没有数据') }}
                    </div>
                    <div v-else class="product-card" v-for="(item,index) in productList2" :key="index" >
                      <div class="top-box">
                        Top{{ index+1 }}
                      </div>
                      <div style="width: 12.5rem;height: 12.5rem;">
                        <img style="width: 12.5rem;height: 100%;object-fit: cover;border-radius: 0.31rem;cursor: pointer;" 
                        :src="item.goods_img" @click="showDetail(item.goods_id)"/>
                      </div>
                      <div class="product-card-title showOverTooltip" style="cursor: pointer;"
                      @click="showDetail(item.goods_id)">{{ item.goods_name }}</div>
                      <div style="display: flex;justify-content: space-between;">
                        <div class="product-card-price">{{ item.retail_price_symbol }}</div>
                        <div v-if="havebtn">
                          <img style="width: 1.56rem;height: 1.56rem;cursor: pointer;" 
                          src="../assets/img/icon/arrowright.svg" @click="showDetail(item.goods_id)"/>
                        </div>
                      </div>
                    </div>
                  </div>
            </div>
          </div>
        </div> -->
        <!-- 热销排行-->
        <div>
          <!-- 无数据时  -->
          <div v-if="!isListData" v-loading="loading" element-loading-text="Loading..." style="margin: 6rem 0;"></div>
          <!-- 有数据时 -->
          <div v-else>
            <!-- 列表视图-->
            <div v-if="!isList" v-show="isVip" style="margin-top: 1rem;">
              <el-table :data="sortedProductList" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px','text-align':'center'}"  height="850"
              :row-style="{height:'70px'}" :cell-style="{'text-align':'center'}" @sort-change="handleSortChange" :header-cell-class-name="getHeaderCellClassName"
              :default-sort="{ prop: sort, order:order }">
                  <el-table-column prop="goods_name" :label="this.$t('表格.商品')" width="380" fixed>
                              <template #default="scope">
                                  <div style="display: flex;">
                                      <div style="cursor: pointer;">
                                          <img :src="scope.row.goods_img" style="width: 5rem;height: 5rem;" @click="showDetail(scope.row.goods_id)"/>
                                      </div>
                                      <div class="showOverTooltip" @click="showDetail(scope.row.goods_id)">
                                          <!-- <span class="product-tag" >{{scope.row.catItems[3].catName}}</span> -->
                                          <span style="font-size: 14px">{{ scope.row.goods_name }}</span>
                                      </div>
                                  </div>
                              </template>
                  </el-table-column>
                  <el-table-column prop="sale_price" :label="this.$t('价格')" sortable="custom" width="140">
                    <template #default="scope">
                      <div style="color: #ff5c00;font-size: 14px">
                        <div v-if="scope.row.sale_price_symbol == null || scope.row.sale_price_symbol == ''">
                          <span>-</span>
                        </div>
                        <div v-else-if="scope.row.retail_price_symbol == scope.row.sale_price_symbol">
                          <span>{{ scope.row.retail_price_symbol }}</span>
                        </div>
                        <div v-else-if="scope.row.retail_price_symbol == null || scope.row.retail_price_symbol == ''">
                          <span>{{ scope.row.retail_price_symbol }}</span>
                        </div>
                        <div v-else>
                          <span>{{ scope.row.sale_price_symbol }} - {{ scope.row.retail_price_symbol }}</span>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
<!--                  <el-table-column prop="sale_price" :label="this.$t('进货价')" sortable="custom" width="140">-->
<!--                            <template #default="scope">-->
<!--                                <div style="color: #ff5c00;font-size: 14px">-->
<!--                                    <div v-if="scope.row.sale_price_symbol == null || scope.row.sale_price_symbol == ''">-->
<!--                                        <span>-</span>-->
<!--                                    </div>-->
<!--                                    <div v-else>-->
<!--                                        <span>{{ scope.row.sale_price_symbol }}</span>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column prop="retail_price" :label="this.$t('零售价')" sortable="custom" width="140">-->
<!--                            <template #default="scope">-->
<!--                                <div style="color: #ff5c00;font-size: 14px">-->
<!--                                    <div v-if="scope.row.retail_price_symbol == null || scope.retail_price_symbol == ''">-->
<!--                                        <span>-</span>-->
<!--                                    </div>-->
<!--                                    <div v-else>-->
<!--                                        <span>{{ scope.row.retail_price_symbol }}</span>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </template>-->
<!--                  </el-table-column>-->
                  <el-table-column :label="this.$t('表格.销量')">
                            <el-table-column prop="sale_count" :label="this.$t('表格.日')" sortable="custom" width="120">
                                <template #default="scope">
                                    <div style="font-size: 14px" v-if="scope.row.sale_count == null">
                                        -
                                    </div>
                                    <div v-else style="font-size: 14px">
                                      {{scope.row.sale_count}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="week_sale_count" :label="this.$t('表格.周')" sortable="custom" width="120">
                              <template #default="scope">
                                <div style="font-size: 14px" v-if="scope.row.week_sale_count == null">-</div>
                                  <div v-else style="font-size: 14px">
                                    {{scope.row.week_sale_count}}
                                  </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="month_sale_count" :label="this.$t('表格.月')" sortable="custom" width="120">
                              <template #default="scope">
                                <div style="font-size: 14px" v-if="scope.row.month_sale_count == null">-</div>
                                  <div v-else style="font-size: 14px">
                                    {{scope.row.month_sale_count}}
                                  </div>
                              </template>
                            </el-table-column>
                  </el-table-column>
                  <el-table-column prop="growth_rate" :label="this.$t('增长率')" sortable="custom" width="145">
                    <template #default="scope">
                      <div style="display: flex;justify-content: center; align-items: center;font-size: 14px;">
                        <!-- 上涨 scope.row.growth_rate[0] !=='-'&& scope.row.growth_rate !=='/'-->
                        <div v-if="scope.row.growth_rate>0 && scope.row.growth_rate !=='/'" style="height: 5rem;line-height: 5rem;">
                          <img style="margin-top: 0.6rem;" src="../assets/img/icon/arrowup1.svg"/>
                          <span style="margin-left: 0.3rem;color:#F53F3F">{{ scope.row.growth_rate }}%</span>
                        </div>
                        <!--下跌 v-else-if="scope.row.growth_rate[0] =='-'"-->
                        <div v-else-if="scope.row.growth_rate<0" style="height: 5rem;line-height: 5rem;">
                          <img style="margin-top: 0.6rem;transform:rotate(180deg);width: 0.94rem;height: 0.94rem;" src="../assets/img/icon/arrowdown.svg"/>
                          <span style="margin-left: 0.3rem;color:#58A55C">{{ scope.row.growth_rate }}%</span>
                        </div>
                        <!-- 无数据 -->
                        <div v-else style="height: 5rem;line-height: 5rem;"><span>{{ scope.row.growth_rate }}%</span></div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column :label="this.$t('表格.销售额')">
                            <el-table-column prop="revenue" :label="this.$t('表格.日')" sortable="custom" width="120">
                              <template #default="scope">
                                <div style="font-size: 14px" v-if="scope.row.revenue == null || scope.row.revenue == ''">-</div>
                                  <div v-else style="font-size: 14px">
                                    {{scope.row.revenue}}
                                  </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="week_revenue" :label="this.$t('表格.周')" sortable="custom" width="120">
                              <template #default="scope">
                                <div style="font-size: 14px" v-if="scope.row.week_revenue == null || scope.row.week_revenue == ''">-</div>
                                  <div v-else style="font-size: 14px">
                                    {{scope.row.week_revenue}}
                                  </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="month_revenue" :label="this.$t('表格.月')" sortable="custom" width="120">
                              <template #default="scope">
                                <div style="font-size: 14px" v-if="scope.row.month_revenue == null || scope.row.month_revenue == ''">-</div>
                                  <div v-else style="font-size: 14px">
                                    {{scope.row.month_revenue}}
                                  </div>
                              </template>
                            </el-table-column>
                  </el-table-column>
                  <el-table-column prop="inventory" :label="this.$t('表格.库存')" sortable="custom" width="110">
                            <template #default="scope">
                                <div v-if="scope.row.inventory == '' || scope.row.inventory == null"> - </div>
                                <div v-else style="font-size: 14px">
                                    {{ parseInt(scope.row.inventory)}}
                                </div>
                            </template>
                  </el-table-column>
                  <el-table-column prop="score" :label="this.$t('表格.评价分数')" sortable="custom" width="130">
                            <template #default="scope">
                                <div v-if="scope.row.score == '' || scope.row.score == null"> - </div>
                                <div v-else style="font-size: 14px">
                                    <!-- {{ parseInt(scope.row.score)}} -->
                                    {{scope.row.score}}
                                </div>
                            </template>
                  </el-table-column>
                  <el-table-column :label="this.$t('表格.产品评级')">
                            <el-table-column prop="star_comment" :label="this.$t('表格.值')" sortable="custom" width="120">
                              <template #default="scope">
                                <div style="font-size: 14px">
                                    {{ parseFloat(scope.row.star_comment)}}
                                </div>
                            </template>
                            </el-table-column>
                            <el-table-column :label="this.$t('表格.星星')" width="140">
                                <template #default="scope">
                                      <!-- show-score="{star}" -->
                                      <el-rate :model-value="parseFloat(scope.row.star_comment)" disabled allow-half :value="scope.row.star_comment !== '0.00' ? parseFloat(scope.row.star_comment) : 5"/>
                                  <!-- 无数据显示5分 -->
                                </template>
                            </el-table-column>
                  </el-table-column>
                </el-table>
            </div>
            <!-- 卡片视图 -->
            <div v-else v-show="isVip">
                  <div style="display: flex;flex-wrap: wrap; justify-content: flex-start;">
                    <!-- 无数据时 显示no data -->
                    <div v-if="productList.length == 0" class="card-noData">
                      {{ $t('卡片没有数据') }}
                    </div>
                    <!--有数据时 一个卡片 -->
                    <div v-else class="product-card" v-for="(item,index) in productList" :key="index" >
                      <div class="top-box">
                        Top{{ index+1 }}
                      </div>
                      <div style="width: 12.5rem;height: 12.5rem;">
                        <img style="width: 12.5rem;height: 100%;object-fit: cover;border-radius: 0.31rem;cursor: pointer;" 
                        :src="item.goods_img" @click="showDetail(item.goods_id)"/>
                      </div>
                      <div class="product-card-title showOverTooltip" style="cursor: pointer;"
                      @click="showDetail(item.goods_id)">{{ item.goods_name }}</div>
                      <div style="display: flex;justify-content: space-between;">
                        <div class="product-card-price">{{ item.retail_price_symbol }}</div>
                        <div v-if="havebtn">
                          <img style="width: 1.56rem;height: 1.56rem;cursor: pointer;" 
                          src="../assets/img/icon/arrowright.svg" @click="showDetail(item.goods_id)"/>
                        </div>
                        <!-- <div v-else>
                          <el-button class="product-card-btn" size="small">{{$t('添加到shopify')}}</el-button>
                        </div> -->
                      </div>
                    </div>
                  </div>
            </div>
          </div>
        </div>
       <!-- 不是vip时显示 -->
      <div v-show="!isVip && isListData && isListData2">
        <div class="can-not-show" style="width: 72.5rem;">{{ $t('没开vip') }}</div>
        <div style="margin-top: 1rem;margin-left: 33rem;">
            <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import {getCountries,getCategory,getProducts,getProductsRank} from '../apis/rank'
export default {
  name: 'MyComponent',
  data(){
    return {
      loading :true,
      // 是否加载完列表的数据  是否显示loading  按销量
      isListData:true,
      // 是否加载完列表的数据 是否显示loading  按增长率
      isListData2:true,
      // 是否显示热销排行
      isHotSellingRank:false,
      isVip:false,
      // 分类列表
      cateList:[
          {
            value:0,
            name:''
          },
        ],
      // 更多列表
      moreList:[
        {
          value:0,
          name:''
        },
      ],
      // 表格表头
      labelList:[
        this.$t('进货价'),this.$t('运费'),this.$t('零售价'),this.$t('利润'),this.$t('昨日销量'),
        this.$t('涨幅'),this.$t('昨日排名'),this.$t('今日销量'),this.$t('销售额增加'),this.$t('增长率')
      ],
      // 控制选中国家的按钮样式
      countriesList:[],
      // 产品列表 销量
      productList:[],
      // 默认5
      star:5,
      sort:'score',
      order:'descending',
      // 产品列表 增长率
      productList2:[],
      getProductInfo:{
        "log_date": "",
        "first_cate_id": "",
        "second_cate_id": "",
        "country": "",
      },
      // 是否显示按钮
      havebtn:true,
      // 控制列表和卡片的切换
      isList:false,
      // 筛选条件
      filterAll:{
        country:'FR',
        // 分类
        first_cate_id:4,
        second_cate_id:196,
        // 日期
        log_date:'',
        country_index:0
      },
      // 获取分类列表的参数
      filterGetCate:{
        country:'FR',
        parent_id:4
      },
      options:[this.$t('热销TOP100'),this.$t('增长率TOP100'),],
      value:this.$t('热销TOP100'),
      minTime:null
    }
  },
  created(){
    
  },
  activated(){// 如果组件被 <keep-alive> 包裹，则使用此方法
    this.updateDisabledDateRange()
    this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
    // this.setDefaultDate()
  },
  beforeRouteEnter(to, from, next) { // 如果你使用 Vue Router，可以在此处处理
    next(vm => {
      vm.updateDisabledDateRange();
    });
  },
  beforeRouteUpdate(to, from, next) { // 如果你使用 Vue Router，可以在此处处理
    this.updateDisabledDateRange();
    next();
  },
  mounted(){
    // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
    this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
    this.filterGetCate.parent_id =4
    let a  = JSON.parse(localStorage.getItem('filterAll'));
    if (a!=null){
      this.filterAll = a;
      if(a.log_date == null || a.log_date==''){
        const today = new Date()
        const yesterday = new Date(today)
        yesterday.setDate(yesterday.getDate() - 1);
        this.filterAll.log_date = yesterday.toISOString().split('T')[0]; // 设置默认日期为昨天
        console.log("日期",this.filterAll.log_date)
      }else if(a.first_cate_id !==null || a.first_cate_id !== '' || a.first_cate_id!== 0){
        this.filterGetCate.parent_id = a.first_cate_id
        this.getCountryList()
        if(this.cateList.length>0){
          // 用于筛选默认商品列表
          // this.filterAll.first_cate_id = this.cateList[0].id
        }
      }else if(a.second_cate_id !==null || a.second_cate_id !== ''){
        // 二级分类绑定的id 选中的二级分类id 用于筛选商品列表
        this.filterAll.second_cate_id = a.second_cate_id
      }else if(a.first_cate_id == 0 || a.first_cate_id ==null || a.first_cate_id == ''){
        this.filterGetCate.parent_id = 1
      }
    }else{
      this.setDefaultDate()
    }
    let b  = JSON.parse(localStorage.getItem('filterGetCate'));
    if(b != null){
      this.filterGetCate = b;
      // if(b.parent_id !== null || b.parent_id !== '' || b.parent_id !==0){
      //   if(this.cateList.length>0){
      //     if(a.first_cate_id !==null || a.first_cate_id!== ''|| a.first_cate_id!== 0){
      //       // 一级分类绑定的id 选中的一级分类id 用于筛选二级分类
      //       this.filterGetCate.parent_id = a.first_cate_id
      //     }else{
      //       this.filterGetCate.parent_id =1
      //     }
      //   }
      // }
    }
    this.getCountryList()
    // 加载商品前 判断都不为空才能请求数据 为空时提示
    if(this.filterAll.first_cate_id == null || this.filterAll.first_cate_id == '' || this.filterAll.second_cate_id == null ||this.filterAll.second_cate_id == ''){
        ElMessage({
          message: this.$t('请选择分类'),
          grouping: true,
          type: 'warning',
          duration:3000,
          showClose: true,
          offset:500
        })
      }else if(this.filterAll.log_date == null || this.filterAll.log_date == ''){
        ElMessage({
          message: this.$t('请选择日期'),
          grouping: true,
          type: 'warning',
          duration:3000,
          showClose: true,
          offset:500
        })
      }
      else{
        // this.isListData2 = false
        // this.getTopProducts2()
        this.isListData = false
        this.getTopProducts()
      }
    let c = JSON.parse(localStorage.getItem('myinfo'))
    if(c.is_active!==false){
      this.isVip = true
    }
  },
  watch: {
    // 监听国家、一级分类、二级分类的变化，并在变化后获取商品数据
    'filterAll.country': {
      handler(newVal) {
        if (newVal) {
          // this.getCateList();
        }
      },
      immediate: true
    },
    // 监听一级分类的变化，并在变化后获取二级分类列表
    'filterAll.first_cate_id': {
      handler(newVal) {
        if (newVal) {
          // this.getCateList2();
        }
      },
      immediate: true
    },
    // 监听二级分类的变化，并在变化后获取商品数据
    'filterAll.second_cate_id': {
      handler(newVal) {
        if (newVal) {
          // this.getTopProducts();
        }
      },
      immediate: true
    }
  },
  computed: {
    sortedProductList() {
      const sortedList = [...this.productList];
      if (this.sort && this.order) {
        sortedList.sort((a, b) => {
          if (this.order === 'ascending') {
            return a[this.sort] - b[this.sort];
          } else {
            return b[this.sort] - a[this.sort];
          }
        });
      }
      return sortedList;
    }
  },
  methods:{
    // 获取国家列表
    getCountryList(){
      getCountries().then((res)=>{
        // 读缓存 没有的时候默认第一个
        if(res.code == 200 && res.status ==1)
        {
          let item_data=[]
              for(let i in res.data){
              if(i==0 && localStorage.getItem('filterAll') == null){
                res.data[i].select_country = 'country-btn-click'
                item_data.push(res.data[i])
                this.filterGetCate.country = res.data[i].short_name
                this.filterAll.country = res.data[i].short_name
                this.filterAll.country_index = 0
              }else{
                res.data[i].select_country = 'country-btn'
                item_data.push(res.data[i])
              }
            }
          this.countriesList = item_data
          this.getCateList()
        }
      })
    },
    // 获取一级分类
    getCateList(){
      if(this.filterGetCate.country =="")
        return ;
      else{
        getCategory({country:this.filterGetCate.country,parent_id:0}).then((res)=>{
          if(res.code == 200 && res.status ==1){
            this.cateList = res.data.lists
            // if(this.cateList.length>0){
              // 用于筛选默认商品列表
              // this.filterAll.first_cate_id = this.cateList[0].id
             // 一级分类绑定的id 选中的一级分类id 用于筛选二级分类
              // this.filterGetCate.parent_id = this.cateList[0].id
            // }
            this.filterAll.first_cate_id = this.cateList[0].id
            this.filterGetCate.parent_id = this.cateList[0].id
            this.getCateList2()
          }
        })
      }
    },
    // 获取二级分类
    getCateList2(){
      // if (this.filterGetCate.parent_id == 0) return;
      getCategory(this.filterGetCate).then((res)=>{
        if(res.code == 200 && res.status ==1){
          if(res.data.lists){
            this.moreList = res.data.lists
            console.log("111111111111111",res.data)
            this.filterAll.second_cate_id = this.moreList[0].id
            this.isListData = false
            this.getTopProducts()
          }
          
        }
      })
    },
    selectCate1(){
      this.filterGetCate.parent_id = this.filterAll.first_cate_id
      this.getCateList2()
      // 清空二级分类id
      this.filterAll.second_cate_id = ''
      // localStorage.setItem('filterAll',JSON.stringify(this.filterAll));
    },
    // 按销量排序
    getTopProducts(){
      // if (!this.filterAll.country|| !this.filterAll.first_cate_id|| !this.filterAll.second_cate_id || !this.filterAll.log_date) return;
      getProducts(this.filterAll).then((res)=>{
        this.isListData = false
        if(res.code == 200 && res.status == 1){
          this.productList = []
          for(let i in res.data.lists)
          {
            this.productList.push(res.data.lists[i])
          }
          this.getProductInfo.country = res.data.country
          this.getProductInfo.log_date = res.data.log_date
          this.getProductInfo.first_cate_id =res.data.first_cate_id
          this.getProductInfo.second_cate_id =res.data.second_cate_id
          this.isListData = true
        }
      }).catch((error)=>{
        this.isListData = true
        console.log('请求失败:', error);
      })
    },
    // 按增长率排序
    getTopProducts2(){
      this.isListData = false
      getProductsRank(this.filterAll).then((res)=>{
        if(res.code == 200 && res.status == 1){
          for(let i in res.data.lists)
          {
            this.productList2.push(res.data.lists[i])
          }
          this.isListData2 = true
        }
      }).catch((error)=>{
        this.isListData = true
        console.log('请求失败:', error);
      })
    },
    // 切换显示类型 卡片/列表
    changeType(index){
      if(this.isList == true && index ==1)
      {
        this.isList = false
      }
      else if(this.isList == true && index ==2){
        this.isList = true
      }
      else if(this.isList == false && index ==3){
        this.isList = false
      }
      else if (this.isList == false && index ==4){
        this.isList = true
      }
    },
    showDetail(id){
        // this.$router.push({
        //     path:'/panel/detail2',
        //     query:{
        //         id:id
        //     }
        // })
        // 跳转新标签页
        const routeData = this.$router.resolve({
                name: 'detail2',
                query:{
                    id:id,
                    country:this.filterAll.country,
                    returnUrl: window.location.href // 记录当前页面的 URL
                }
            });
            window.open(routeData.href, '_blank');
    },
    // 选中国家
    selectCountry(i){
      //if(this.cateList !==[] && this.moreList !==[]){
        for(var n in this.countriesList){
          this.countriesList[n].select_country ="country-btn"
        }
        let date = this.filterAll.log_date
        // 清空filterAll
        // this.filterAll = {}
        localStorage.setItem('filterGetCate','')
        localStorage.setItem('filterGetCate','')
        this.filterAll.country_index = i
        this.countriesList[i].select_country ="country-btn-click"
        this.filterGetCate.country = this.countriesList[i].short_name
        this.filterGetCate.parent_id = i+1
        this.filterAll.country = this.countriesList[i].short_name
        this.cateList = []
        this.moreList =[]
        this.filterAll.log_date = date
        this.getCateList()
        // 保存选项
        localStorage.setItem('filterGetCate',JSON.stringify(this.filterGetCate));
        localStorage.setItem('filterAll',JSON.stringify(this.filterAll));
        // this.getTopProducts()
      //}
    },
    // 跳转到订阅页面
    shiftReserve(){
      this.$router.push('/subscribe/price')
    },
    // 设置不可选的时间
    disabledDate(time){
      if (!(time instanceof Date)) {
        time = new Date(time);
      }

      // 7天的时间戳
      // const one = 8 * 24 * 3600 * 1000;
      // 当前日期 - one = 7天之前
      // const minTime = Date.now() - one;
      return (
        time.getTime() > Date.now()-24*3600*1000 ||
        time.getTime() < this.minTime
      )
    },
    updateDisabledDateRange() {
      // 这里可以添加任何需要更新的逻辑
      // 例如，重新计算七天前的日期等
      // 7天的时间戳
      const one = 8 * 24 * 3600 * 1000;
      // 当前日期 - one = 7天之前
      this.minTime = Date.now() - one;
      this.$forceUpdate(); // 强制更新组件，确保 disabledDate 重新计算
    },
    setDefaultDate() {
      const today = new Date()
      const yesterday = new Date(today);
      yesterday.setDate(yesterday.getDate() - 1); // 昨天的日期
      this.filterAll.log_date = yesterday.toISOString().split('T')[0];
    },
    handleFocus(){
      this.disabledDate()
    },
    handleVisibleChange(visible){
      if (visible) {
        this.updateDisabledDateRange();
      } else {
        console.log('unvisible');
      }
    },
    searchProduct(){
      localStorage.setItem('filterGetCate',JSON.stringify(this.filterGetCate));
      localStorage.setItem('filterAll',JSON.stringify(this.filterAll));
      this.productList = []
      this.productList2 = []
      if(this.filterAll.first_cate_id == null || this.filterAll.first_cate_id == '' || 
        this.filterAll.second_cate_id == null ||this.filterAll.second_cate_id == ''){
        ElMessage({
          message: this.$t('请选择分类'),
          grouping: true,
          type: 'warning',
          duration:3000,
          showClose: true,
          offset:500
        })
      }else if(this.filterAll.log_date == null || this.filterAll.log_date == ''){
        ElMessage({
          message: this.$t('请选择日期'),
          grouping: true,
          type: 'warning',
          duration:3000,
          showClose: true,
          offset:500
        })
      }
      else{
          this.isListData = false
          this.isListData2 = false
          this.getTopProducts()
          // this.getTopProducts2()
      }
    },
    segmentChange(e){
      if(e == this.$t('热销TOP100')){
        this.isHotSellingRank = false
      }else if(e == this.$t('增长率TOP100')){
        this.value = e
        this.isHotSellingRank = true
      }
    },
    handleSortChange({ column, prop, order }){
      console.log(111111111,column)
      console.log(222222222,prop)
      console.log(333333333,order)
      if (!prop) {
        // 如果 prop 为空，可以选择忽略排序或给出提示
        console.warn('prop,error');
        return;
      }
      this.sort = prop;
      this.order = order
    },
    getHeaderCellClassName({ column, columnIndex }) {
      console.log(columnIndex)
      if (this.sort == column.property) {
        return 'sorted-header';
      }
      return '';
    },
  },
}
</script>

<style lang="scss" scoped>
.filter-card{
  margin: 1rem 0 0 0;
  padding: 1rem;
  box-sizing: border-box;
  width: 100%;
  height: 24.38rem;
  border-radius: 0.31rem;
  background-color: rgba(255, 255, 255, 1);
  .filter-card-title{
    width: 19.38rem;
    height: 1.88rem;
    line-height: 1.88rem;
    color: rgba(16, 16, 16, 1);
    font-size: 1.25rem;
    font-weight: 600;
    text-align: left;
    font-family: AlibabaPuHui-medium;
  }
}
.sub-title{
  height: 1.88rem;
  line-height: 1.88rem;
  color: rgba(16, 16, 16, 1);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  font-family: AlibabaPuHui-regular;
}
.selecter-label{
  width: 5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  color: rgba(16, 16, 16, 1);
  font-size: 0.88rem;
  text-align: center;
  font-family: AlibabaPuHui-regular;
}
.show-card{
  margin: 1rem 0 0 0;
  padding: 1rem;
  box-sizing: border-box;
  width: 100%;
  min-height: 21.88rem;
  // max-height: 48.13rem;
  border-radius: 0.31rem;
  background-color: rgba(255, 255, 255, 1);
  .product-card{
    position: relative;
    margin: 1rem 1rem 0 0;
    width: 12.5rem;
    height: 17.5rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(229, 229, 229, 1);
    cursor: pointer;
  }
  .product-card-title{
    margin: 0.31rem 1rem 0 0.7rem;
    width: 11.25rem;
    height: 2.5rem;
    line-height: 1.25rem;
    color: rgba(16, 16, 16, 1);
    font-size: 0.75rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
  .product-card-price{
    margin: 0 0 0 0.6rem;
    width: 6rem;
    height: 1.56rem;
    line-height: 1.56rem;
    color: rgba(250, 99, 56, 1);
    font-size: 0.88rem;
    text-align: left;
    font-family: AlibabaPuHui-bold;
  }
  .product-card-btn{
    margin-right: 1rem;
    width: 4.94rem;
    height: 1.56rem;
    border-radius: 5.63rem;
    border: 0.06rem solid rgba(22, 93, 255, 1);
    color: rgba(22, 93, 255, 1);
    font-size: 0.58rem;
    text-align: center;
    font-family: Roboto;
  }
  .top-box{
    position: absolute;
    z-index: 2;
    width: 3.75rem;
    height: 1.25rem;
    line-height: 1.06rem;
    border-radius: 0.31rem 0rem 0.31rem 0rem;
    background-color: rgba(253, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    font-family: Roboto;
  }
}
/* el-divider 修改高度效果 */
.el-divider--horizontal{
     margin: 1rem 0;
    //  background: 0 0;
     border-top: 0.1rem solid #f2f3f5;
 }
//  显示两行
 .showOverTooltip{
    padding: 0 0.3rem;
    cursor: pointer;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 46px;
    margin: auto 0;
    color: #165DFF;
}
// 国家按钮 选中
.country-btn-click{
  min-width: 6.25rem;
  height: 2.5rem;
  line-height: 1.25rem;
  border-radius: 0.13rem;
  background-color: rgba(22, 93, 255, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 0.88rem;
  text-align: center;
  font-family: Roboto;
}
// 国家按钮 未选中
.country-btn{
  min-width: 6.25rem;
  height: 2.5rem;
  line-height: 1.25rem;
  border-radius: 0.13rem;
  background-color: rgba(242, 243, 245, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 0.88rem;
  text-align: center;
  font-family: Roboto;
}
.can-not-show{  
    margin-top: 3rem;
    width: 36.25rem;
    height: 3.13rem;
    line-height: 3.13rem;
    color: rgba(16, 16, 16, 1);
    font-size: 0.88rem;
    text-align: center;
    font-family: AlibabaPuHui-regular;
}
.card-noData{
  margin: 3rem 0;
  width: 72.5rem;
  height: 3.13rem;
  color: rgba(187, 187, 187, 1);
  font-size: 1.25rem;
  text-align: center;
  font-family: AlibabaPuHui-bold; 
}
.custom-style .el-segmented {
        //   --el-segmented-item-selected-color: var(--el-text-color-primary);
        --el-segmented-item-selected-color:#1F63FF ;
        //   --el-segmented-item-bg-color: #fff;
        --el-segmented-item-selected-bg-color: #F2F3F8;
        --el-border-radius-base: 20px;
}
::v-deep .el-table th.sorted-header  {
    color: #3a8ddb !important;
}
</style>